<template>
  <div>
    <div class="flex-com mar-btm">
      <span class="label-title font-weight-bold iconfont icon-branch"></span>
      <el-select
        v-model="action.autoType" size="mini"
        placeholder="选择变量" class="width-input"
        @change="() => resetAtomic(action)">
        <el-option
          v-for="(state, index) in choseVarList" :key="index"
          :label="state.name" :value="state.key"></el-option>
      </el-select>
    </div>
    <!--固定值-->
    <div class="flex-com mar-btm" v-if="action.autoType === 0">
      <span class="label-title font-weight-bold iconfont icon-branch"></span>
      <!--设备命令参数有固定值就是select 否则是input  //当是修改组件是action.value.value-->
      <el-input
        v-if="action.type === 'editVar' && (action.portsType==='string' || !action.portsType)"
        v-model="action.value.value" size="mini"
        placeholder="请输入固定值"
        class="width-input"
        @input="changeState(action)"></el-input>
      <el-input-number
        v-else-if="['int','double'].includes(action.portsType) && action.type === 'editVar'"
        v-model="action.value.value" size="mini"
        placeholder="请输入固定值"
        class="width-input"
        @input="changeState(action)"></el-input-number>
      <el-input type="textarea" v-else-if="['list', 'map'].includes(action.portsType) && action.type === 'editVar'"
                v-model="action.value.value" class="width-input" @input="changeState(action)"
                placeholder="请输入固定值" size="mini"></el-input>
      <el-select
        v-else-if="['bool'].includes(action.portsType) && action.type === 'editVar'"
        v-model="action.value.value"
        placeholder="请选择"
        size="mini" class="width-input"
        @change="()=>changeState(action)">
        <el-option label="是" :value="true"></el-option>
        <el-option label="否" :value="false"></el-option>
      </el-select>
      <el-select
        v-else-if="action.enumList && action.enumList.length > 0"
        v-model="action.value"
        :placeholder="`选择${action.paramAlias}`"
        size="mini" class="width-input"
        @change="() => changeState(action)">
        <el-option
          v-for="enumItem in action.enumList" :key="enumItem.key"
          :label="enumItem.alias" :value="enumItem.key"></el-option>
      </el-select>
      <!--设备固定值无参数-->
      <InputsComponent :inputsObject="action" v-else-if="action.enumList && action.enumList.length === 0" @changeState="changeState(action)"></InputsComponent>
      <!--真值反馈固定值判断-->
      <el-input
        v-else-if="action.isCondition && ['string'].includes(action.type)" v-model="action.value"
        size="mini" placeholder="请输入固定值" class="width-input"></el-input>
      <el-input-number
        v-else-if="['int','double'].includes(action.type) && action.isCondition"
        v-model="action.value"
        size="mini" placeholder="请输入固定值"
        class="width-input"></el-input-number>
      <el-input type="textarea" v-else-if="['list', 'map'].includes(action.type) && action.isCondition"
                v-model="action.value"
                size="mini" placeholder="请输入固定值"
                class="width-input"></el-input>
      <el-select
        v-else-if="['bool'].includes(action.type) && action.isCondition"
        v-model="action.value"
        placeholder="请选择" size="mini"
        class="width-input">
        <el-option label="是" :value="true"></el-option>
        <el-option label="否" :value="false"></el-option>
      </el-select>
      <!--action.value是设备固定值-->
      <el-input
        v-else v-model="action.value" size="mini"
        placeholder="请输入固定值" class="width-input"
        @input="changeState(action)"></el-input>
    </div>
    <!--选元件/再从ports.values选状态-->
    <div v-if="action.autoType === 1">
      <div class="flex-com mar-btm">
        <span class="label-title font-weight-bold iconfont icon-branch"></span>
        <el-input
          :value="getAtomicAttr(action.toAtomic,'name')"
          disabled size="mini"
          placeholder="选择组件"
          class="width-input"></el-input>
        <span class="label-title font-color-primary font-weight-bold cursor-pointer"
              @click="showWidgetPicker(action)">选择</span>
      </div>
      <div class="flex-com mar-btm" v-if="action.toAtomic">
        <span class="label-title font-weight-bold iconfont icon-branch"></span>
        <el-select
          v-if="action.type === 'editVar'"
          v-model="action.value.value"
          size="mini" placeholder="选择变量"
          class="width-input"
          @change="() => changeState(action)">
          <el-option
            v-for="(state, index) in getAtomicAttr(action.toAtomic,'ports')" :key="index"
            :label="state.name" :value="`${action.toAtomic}.${state.key}`"></el-option>
        </el-select>
        <el-select
          v-else v-model="action.value" size="mini"
          placeholder="选择变量" class="width-input"
          @change="() => changeState(action)">
          <el-option
            v-for="(state, index) in getAtomicAttr(action.toAtomic,'ports')" :key="index"
            :label="state.name" :value="`${action.toAtomic}.${state.key}`"></el-option>
        </el-select>
      </div>
    </div>
    <!--全局变量-->
    <div v-if="action.autoType === 2" class="flex-com mar-btm">
      <span class="label-title font-weight-bold iconfont icon-branch"></span>
      <el-select
        v-if="action.type === 'editVar'"
        v-model="action.value.value"
        size="mini" class="width-input"
        @change="() => changeState(action)">
        <el-option
          v-for="(global, index) in globalVarList" :key="index"
          :label="global.name" :value="global.key"></el-option>
      </el-select>
      <el-select
        v-else
        v-model="action.value"
        size="mini" class="width-input"
        @change="() => changeState(action)">
        <el-option
          v-for="(global, index) in globalVarList" :key="index"
          :label="global.name" :value="global.key"></el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
  import {mapState} from "vuex";
  import {getAtomicAttr} from "@/utils";
  import InputsComponent from "./InputsComponent.vue";
  import {dataTypeArray} from "@/config/common";
  export default {
    name: "SelectVariable",
    components:{InputsComponent},
    props: {
      action: {
        type: Object,
        default: () => {
          return {};
        },
      },
      iftttLogic: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
      //判断条件为空值的时候使用
      stateLogic: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    data() {
      return {
        choseVarList: [
          {name: "固定值", key: 0},
          {name: "组件变量", key: 1},
          {name: "全局变量", key: 2},
        ],
        oldAction: this.action,
        getAtomicAttr: getAtomicAttr,
        dataTypeArray:dataTypeArray
      }
    },
    mounted() {
      if (this.iftttLogic) {
        this.choseVarList.push({name: "设备变量", key: 3});
      }
      if (this.stateLogic) {
        this.choseVarList.push({name: "空值", key: 4});
      }
    },
    computed: {
      ...mapState({
	      globalVarList: (state) => state.ide.globalVarList,
      }),
    },
    watch: {
      'oldAction.toAtomic': {
        handler(val) {
          if (val) {
            //设备控制选组件不刷新 采取监控
            this.getAtomicAttr(val, 'name');
            this.$forceUpdate();
          }
        },
        deep: true,
        immediate: true
      }
    },
    methods: {
      //重置原子
      resetAtomic(item) {
        this.$forceUpdate();
        item.value = item.type === 'editVar' ? {} : '';
      },
      changeState(action) {
        this.$forceUpdate();
        this.$emit('changeState', action);
      },
      showWidgetPicker(action) {
        this.$emit('showPicker', [action, 'toAtomic']);
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .el-collapse-item__header {
    padding-left: 10px !important;
    font-size: 14px;
  }

  .pad-divider {
    padding: 20px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #dadce5;
  }

  .title {
    margin: 0;
    color: @colorGray10;
    font-size: 14px;
  }

  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .small-title {
    font-size: 16px;
    color: #666;
    margin: 10px 0;
  }

  .label-title {
    display: inline-block;
    min-width: 42px;
    color: #12131A;
    font-size: 14px;
    text-align: center;
  }

  .state-input {
    /deep/ .el-input__inner {
      background: #f7f8fa;
      border: none;
      outline: none;
    }
  }

  .width-input {
    width: 100%;

    /deep/ .el-input__inner {
      background: #f7f8fa;
    }
  }

  .ifttt-cont {
    width: 100%;

    .flex-com {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .label-title {
      min-width: 42px;
      color: @colorGray10;
      font-size: 14px;
      text-align: center;
      flex-shrink: 0;
    }

    .width-input {
      width: 350px;

      /deep/ .el-input__inner {
        width: 100%;
      }

      /deep/ .el-input__inner {
        background: #fff;
      }
    }
  }
</style>
